<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>中国梦想游-会员注册页</title>
<link rel="stylesheet" type="text/css" href="/back/css/hzw-city-picker.css">
<link rel="stylesheet" type="text/css" href="/back/css/timedropper.min.css">
<link href="/back/css/style.css" rel="stylesheet" type="text/css" />
<link href="/back/css/common.css" rel="stylesheet" type="text/css" />
<link href="/back/css/button.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/back/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/back/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="/back/js/city-data.js"></script>
<script type="text/javascript" src="/back/js/hzw-city-picker.min.js"></script>
<script src="/back/js/timedropper.min.js"></script>
<style type="text/css">
.regin_tw table tr td {
    line-height: 40px;
    font-size: 14px;
}
</style>
<script type="text/javascript">

/***********列车昵称****************/
function checkPhone(){
	
	var strPhone=document.getElementById("PhoneNumber").value;
	var divName=document.getElementById("w4");
	divName.style.display="inline";
	if(strPhone==""){
		divName.innerHTML="<font color='red'>&nbsp;&nbsp;列车昵称不能为空</font>";
		return false;
	}
	var reg=/^[A-Z]+[0-9]{3,4}$/;
	if(!reg.test(strPhone)){
		divName.innerHTML="<font color='red'>&nbsp;&nbsp;列车昵称不对</font>";
		return false;
	}

	$.ajax({  
        type:"POST",  
        url:"/CheckTrainServlet",  
        data:{  
        	trainname:$("input[name='lcname']").val()
        },  
        dataType:"json",  
        success:function (data) {  
        	if(data==1){
				divName.innerHTML="<font color='red'>&nbsp;&nbsp;列车昵称已存在！</font>";
				return false;
			} else {					
				divName.innerHTML="<font color='green'>&nbsp;&nbsp;列车昵称有效</font>";
				return true;
			} 
        } 
    }) 
    return true;

} 

/***********验证容纳人数*************/
function checkTrueName(){
	
	var strTName=document.getElementById("TName").value;
	var divName=document.getElementById("w5");
	divName.style.display="inline";
	if(strTName==""){
		divName.innerHTML="<font color='red'>&nbsp;&nbsp;容纳人数不能为空</font>";
		return false;
	}
	var reg=/^[1-9][0-9]{2}$/;
	if(!reg.test(strTName)){
		divName.innerHTML="<font color='red'>&nbsp;&nbsp;以不为0的数字开头的任意三位数</font>";
		return false;
	}else{
		divName.innerHTML="<font color='green'>&nbsp;&nbsp;您填写的客车容量符合要求！</font>";	
	}
	return true;
}

/************验证客车类型************/
function checkIDCard(){
	
	var strCard=document.getElementById("IDCard").value;
	var divName=document.getElementById("w6");
	divName.style.display="inline";
	if(strCard==""){
		divName.innerHTML="<font color='red'>&nbsp;&nbsp;客车类型不能为空</font>";
		return false;
	}
	var reg=/^[\u4E00-\u9FA5]{2,6}$/;
	if(!reg.test(strCard)){
		divName.innerHTML="<font color='red'>&nbsp;&nbsp;名字中只能用4-6个汉字组成！</font>";
		return false;
	}else{
		divName.innerHTML="<font color='green'>&nbsp;&nbsp;您填写的客车类型有效</font>";	
	}
	return true;
}


/***********验证发车时间*************/
 function checkRepass(){
	var strName=document.getElementById("picktime").value;
	var divName=document.getElementById("w8");
	divName.style.display="inline";
	
	if(strPass==""){
		divName.innerHTML="<font color='red'>&nbsp;&nbsp;到站时间不能为空</font>";
		return false;
	}else{
		divName.innerHTML="<font color='green'>&nbsp;&nbsp;√</font>";	
	}
	return true;
} 
/***********验证到站时间*************/
  function checkMiBao(){
	var strPass=document.getElementById("picktime1").value;
	var divName=document.getElementById("w7");
	divName.style.display="inline";
	if(strPass==""){
		divName.innerHTML="<font color='red'>&nbsp;&nbsp;到站时间不能为空</font>";
		return false;
	}else{
		divName.innerHTML="<font color='green'>&nbsp;&nbsp;√</font>";	
	}
	return true;
} 

  function checkqidain(){
	  
	  var strMi=document.getElementById("cityChoice").value;
	  var divName=document.getElementById("w1");
	  if(strMi==""){
			divName.innerHTML="<font color='red'>&nbsp;&nbsp;起点不能为空</font>";
			return false;
		}else{
			divName.innerHTML="<font color='green'>&nbsp;&nbsp;√</font>";

		}
	  return true;
  }
  

  
function checkzhongdian(){
	  
	  var strMi=document.getElementById("cityChoice1").value;
	  var divName=document.getElementById("w2");
	  if(strMi==""){
			divName.innerHTML="<font color='red'>&nbsp;&nbsp;起点不能为空</font>";
			return false;
		}else{
			divName.innerHTML="<font color='green'>&nbsp;&nbsp;√</font>";

		}
	  return true;
  }
  


/**********验证车票价钱*************/
function checkjiaqian(){
	var strMi=document.getElementById("jiaqian").value;
	var divName=document.getElementById("w9");
	divName.style.display="inline";
	if(strMi==""){
		divName.innerHTML="<font color='red'>&nbsp;&nbsp;车票价钱不能为空</font>";
		return false;
	}
	var reg=/^([1-9]{1})+([0-9]{1,2})+(.[0-9]{1,2})$/;
	if(!reg.test(strMi)){
		divName.innerHTML="<font color='red'>&nbsp;&nbsp;车票价钱格式为1-3为整数加两位小数（例如：123.12）</font>";
		return false;
	}else{
		divName.innerHTML="<font color='green'>&nbsp;&nbsp;您填写的车票价钱符合要求</font>";	
	}
	return true;
} 
 

  function checkAll(){
	
	
	if(checkPhone()& checkTrueName()&checkIDCard()&checkjiaqian()&checkzhongdian()&checkqidain()){
		if(confirm("确认要提交么？")){			
									
			return true;
		}else{
			alert("您取消了添加班次的提交！！");
			return false;
		} 
	}else{
		 
		return false;
	}
	
}  

var cityPicker = new HzwCityPicker({
    data: data,
    target: 'cityChoice',
    valType: 'k-v',
    hideCityInput: {
        name: 'city',
        id: 'city'
    },
    hideProvinceInput: {
        name: 'province',
        id: 'province'
    }
    
});

cityPicker.init();

function tishi(op){
	if(op==1){
		alert("添加班次成功")
	}
	
}

</script> 
</head>
<body onload="tishi(${flag})">

<div class="head_w" style="height: 100px;">
    <div class="head_t clearfix">
        <div class="logo"><img src="/back/img/logo.jpg"></div>
        
    </div>
</div>

<div class="b_wrap" style="height: 900px;">
    <div class="current" ><h1 style="font-size:30px;">添加列车班次</h1></div>
    <div class="regin_w clearfix">
        <div class="regin_con" style="width: 950px;">
            <div class="regin">
              <div class="tab_menu regin_menu">
                <ul class="regin_ul">
                    <li class="selected" style="list-style: none;">添加列车班次</li>
<!--                     <li>邮箱注册</li> -->
                </ul>
              </div>
              <div class="tab_box" stype="width:982px"> 
                   <div class="regin_tw " style="width:912px">
                        <form name="loginForm" action="${pageContext.request.contextPath}/AddTrainServlet" onsubmit="return checkAll()" method="post" style=";margin-left:100px">
                        <table width="730" border="0" cellspacing="0" cellpadding="0" style:" margin-left:100px">
                          <tr>
                            <td width="120">列车昵称：</td>
                            <td width="588"><input class="rg_in" type="text" name="lcname" id="PhoneNumber" value="" placeholder="" onBlur="checkPhone()">
                              <div id="w4" style="display:inline; background-color:#FFF"><font color='green' style="font-size:14px;">&nbsp;&nbsp;以任意大写字母开头，加三到四个任意数字的组合</font></div>
                            </td>
                          </tr>
                           <tr>
                            <td>容纳人数：</td>
                            <td><input class="rg_in" type="text" name="rnrs" id="TName" value="" placeholder="" onBlur="checkTrueName()">
                             <div id="w5" style=" display:inline;background-color:#FFF"><font color='green'>&nbsp;&nbsp;以不为零的数字开头的三位数，例如：540</font></div>
                            </td>
                          </tr>
                          <tr>
                            <td>客车类型：</td>
                            <td><input class="rg_in" type="text" name="kclx" id="IDCard" value="" placeholder="" onBlur="checkIDCard()">
                             <div id="w6" style=" display:inline;background-color:#FFF"><font color='green'>&nbsp;&nbsp;名字中只能用4-6个汉字组成</font></div>
                            </td>
                          </tr>
                          <tr>
                            <td>起点站：</td>
                            <td><input class="rg_in" readonly type="text" name="qdz" id="cityChoice" value="郑州市" placeholder=""  >
                            <div id="w1" style=" display:inline;background-color:#FFF"><font color='green'>&nbsp;&nbsp;请选择起点站</font></div>
                            </td>
                          </tr>
                      <script>
					    var cityPicker = new HzwCityPicker({
					        data: data,
					        target: 'cityChoice',
					        valType: 'k-v',
					        hideCityInput: {
					            name: 'city',
					            id: 'city'
					        },
					        hideProvinceInput: {
					            name: 'province',
					            id: 'province'
					        },

					    });
					
					    cityPicker.init();
					</script>
                          <tr>
                            <td>终点站：</td>
                            <td><input class="rg_in" readonly type="text" name="zdz" id="cityChoice1" value="上海市" placeholder="" >
                            <div id="w2" style=" display:inline; background-color:#FFF;"><font color='green'>&nbsp;&nbsp;请选择终点站</font></div>
                            </td>
                          </tr>
                     <script>
					    var cityPicker = new HzwCityPicker({
					        data: data,
					        target: 'cityChoice1',
					        valType: 'k-v',
					        hideCityInput: {
					            name: 'city',
					            id: 'city'
					        },
					        hideProvinceInput: {
					            name: 'province',
					            id: 'province'
					        },

					    });
					
					    cityPicker.init();
					</script>
                          <tr>
                            <td>出发时间：</td>
                            <td><input class="rg_in" type="text" name="cfsj" id="picktime" value="0:00:00" placeholder="" >
                            <div id="w8" style="background-color: #FFF;display:inline;"><font color='green'>&nbsp;&nbsp;请选择出发时间</font></div>
                            </td>
                          </tr>
                          <script>
						
							$("#picktime").timeDropper({
								meridians: false,
								format: 'HH:mm:00',
							});
							</script>
                          <tr>
                            <td>到达时间：</td>
                            <td><input class="rg_in" type="text" name="dzsj" id="picktime1" value="00:00:00" placeholder="" ">
                            <div id="w7" style="background-color: #FFF;display:inline;"><font color='green'>&nbsp;&nbsp;请选择到达时间</font></div>
                            </td>
                          </tr>
                          <script>
						  $("#picktime1").timeDropper({
								meridians: false,
								format: 'HH:mm:00',
							});
						  </script>
						  <tr>
                            <td>车票基础价钱：</td>
                            <td><input class="rg_in" type="text" name="cpjcjq" id="jiaqian" value="" placeholder="" onBlur="checkjiaqian()">
                            <div id="w9" style="background-color: #FFF;display:inline;"><font color='green'>&nbsp;&nbsp;车票价钱格式为1-3为整数加两位小数（例如：123.12）</font></div>
                            </td>
                          </tr>

                          <tr>
                            <td>&nbsp;</td>
                            <td> <button type="submit" class="button blue">确认添加</button></td>

                          </tr>
                        </table>
                        </form>
                        
                   
                </div>
            </div>
        </div>
        
</div>

    

</body>
</html>
    